(一) 语义化标签

(1) 常见的新增语义标签

<section> 表示区块
<article> 表示文章。如文章、评论、帖子、博客
<header> 表示页眉
<footer> 表示页脚
<nav> 表示导航
<aside> 表示侧边栏。如文章的侧栏
<figure> 表示媒介内容分组 (用得少)
<mark> 表示标记 (用得少)
<progress> 表示进度 (用得少)
<time> 表示日期 (用得少)

(2) 新语义标签的兼容性处理

IE8 及以下版本的浏览器不支持 H5 和 CSS3。解决办法：引入html5shiv.js文件。

引入时，需要做 if 判断，具体代码如下：

<!--  条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
  <script src="html5shiv.min.js"></script>
<![endif]-->

(3) H5 中新增的表单类型

email 只能输入 email 格式。自动带有验证功能。
tel 手机号码。
url 只能输入 url 格式。
number 只能输入数字【必须】
search 搜索框
range 滑动条
color 拾色器
time 时间
date 日期
datetime 时间日期
month 月份

week 星期

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />
    <title>表单类型</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #f7f7f7;
      }

      form {
        max-width: 500px;
        width: 100%;
        margin: 32px auto 0;
        font-size: 16px;
      }

      label {
        display: block;
        margin: 10px 0;
      }

      input {
        width: 100%;
        height: 25px;
        margin-top: 2px;
        display: block;
      }
    </style>
  </head>
  <body>
    <form action="">
      <fieldset>
        <legend>表单类型</legend>
        <label for="">
          email: <input type="email" name="email" required />
        </label>
        <label for=""> color: <input type="color" name="color" /> </label>
        <label for=""> url: <input type="url" name="url" /> </label>
        <label for="">
          number: <input type="number" step="3" name="number" />
        </label>
        <label for="">
          range: <input type="range" name="range" value="100" />
        </label>
        <label for=""> search: <input type="search" name="search" /> </label>
        <label for=""> tel: <input type="tel" name="tel" /> </label>
        <label for=""> time: <input type="time" name="time" /> </label>
        <label for=""> date: <input type="date" name="date" /> </label>
        <label for=""> datetime: <input type="datetime" /> </label>
        <label for=""> week: <input type="week" name="month" /> </label>
        <label for=""> month: <input type="month" name="month" /> </label>
        <label for="">
          datetime-local:
          <input type="datetime-local" name="datetime-local" />
        </label>
        <input type="submit" />
      </fieldset>
    </form>
  </body>
</html>

(二) web 本地缓存

问题: 说下 cookie，sessionStorage，localStorage

(1) 相同点：

cookie，sessionStorage，localStorage 这三者都可以被用来在浏览器端存储数据。

(2) 不同点：

1. 存储大小不一样

cookie 数据不超过 4kb，localStorage 和 sessionStorage 是 5M

2. 数据有效期不同

cookie 在设置的（服务器设置）有效期内有效
localStorage 一直有效，除非主动删除数据，否则不会过期
sessionStorage 仅在当前浏览器窗口关闭前有效，关闭即销毁

注: localStorage 可以理解为永久存储, sessionStorage 可以理解为临时存储

// 存储数据
localStorage.setItem('username','张三');
// 获取数据
localStorage.getItem('username');
// 清除数据
localStorage.removeItem('username');
// 清除全部数据
localStorage.clear()

(三) websocket

// 服务器端代码app.js
const Koa = require("koa");
const path = require("path");
const websockify = require("koa-websocket");
const app = websockify(new Koa());
const serv = require("koa-static");
app.use(serv(__dirname + "/public"));


app.ws.use((ctx, next) => {
  // 给前端发信息
  let count = 1;
  setInterval(() => {
    ctx.websocket.send(
        `${count++}. 如果没有躺赢的命,那就站起来奔跑`
    );
  }, 2000);

  // 监听前端发来的信息
  ctx.websocket.on("message", function (message) {
    console.log(message);
  });
});

app.listen(3000,()=>{
    console.log('http://localhost:3000');
})

// index.html代码, 需要在根目录创建public目录, 然后创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
      // 创建sock
        var ws = new WebSocket("ws://localhost:3000");
        ws.onopen = function (evt) {
            console.log("连接成功");
            ws.send("我是张三");
        };
        // 监听服务器信息
        ws.onmessage = function (evt) {
            document.write("收到服务器端发来的信息: " + evt.data+'<br/>');
        };

        ws.onclose = function (evt) {
            console.log("Connection closed.");
        };
    </script>
</body>
</html>


// 小程序代码
Page({
  onShow() {
    // 连接socket
    wx.connectSocket({
      url: 'ws://localhost:3000'
    })
    // 监听连接状态
    wx.onSocketOpen(function (res) {
      console.log('socket已連接')
    })
    // 监听服务器信息
    wx.onSocketMessage(res=> {
      console.log(res);
    })
  }
}

(四) 音频和视频

(1) 音频

HTML5 通过<audio>标签来解决音频播放的问题。

<!DOCTYPE html>
<html>
  <body>
    <audio src="https://www.w3school.com.cn/i/horse.ogg" controls="controls">
      Your browser does not support the audio element.
    </audio>
  </body>
</html>

为了做到多浏览器支持，可以采取以下兼容性写法：

<!--推荐的兼容写法：-->
<audio controls loop>
  <source src="music/yinyue.mp3" />
  <source src="music/yinyue.ogg" />
  <source src="music/yinyue.wav" />
  抱歉，你的浏览器暂不支持此音频格式
</audio>

(2) 视频

HTML5 通过<video>标签来解决视频播放的问题。

<!DOCTYPE html>
<html>
  <body>
    <video src="https://www.w3school.com.cn/i/movie.ogg" controls="controls">
      你的浏览器不支持video标签
    </video>
  </body>
</html>

兼容性写法:

<video controls autoplay>
  <source src="video/movie.mp4" />
  <source src="video/movie.ogg" />
  <source src="video/movie.webm" />
  抱歉，不支持此视频
</video>

视频播放插件videojs 官网教程

(五) DOM 操作

(1) 选择器

document.querySelector();
document.querySelectorAll();

(2) 自定义属性

js 里可以通过 box1.index=100; box1.title 来自定义属性和获取属性。

H5 可以直接在标签里添加自定义属性，但必须以 data- 开头。

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <!-- 给标签添加自定义属性 必须以data-开头 -->
    <div
      class="box"
      title="盒子"
      data-my-name="smyhvae"
      data-content="我是一个div"
    >
      div
    </div>
    <script>
      var box = document.querySelector(".box");

      //自定义的属性 需要通过 dateset[]方式来获取
      console.log(box.dataset["content"]); //打印结果：我是一个div
      console.log(box.dataset["myName"]); //打印结果：smyhvae

      //设置自定义属性的值
      var num = 100;
      num.index = 10;
      box.index = 100;
      box.dataset["content"] = "aaaa";
    </script>
  </body>
</html>

(六) 拖拽 api

draggable="true" 讲需要被拖放的数据加上此属性
setData()保存数据
drag ondrag 当拖动元素或选中的文本时触发。
dragend ondragend 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键). (见结束拖拽)
dragenter ondragenter 当拖动元素或选中的文本到一个可释放目标时触发（见指定释放目标）。
dragexit ondragexit 当元素变得不再是拖动操作的选中目标时触发。
dragleave ondragleave 当拖动元素或选中的文本离开一个可释放目标时触发。
dragover ondragover 当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。
dragstart ondragstart 当用户开始拖动一个元素或选中的文本时触发（见开始拖动操作）。
drop ondrop 当元素或选中的文本在可释放目标上被释放时触发（见执行释放）。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #div1 {
        width: 198px;
        height: 66px;
        padding: 10px;
        border: 1px solid #aaaaaa;
      }
    </style>
  </head>

  <body>
    <p>请把 W3School 的图片拖放到矩形中：</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <img
      id="drag1"
      src="https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif"
      draggable="true"
      ondragstart="drag(event)"
    />

    <script type="text/javascript">
      function allowDrop(ev) {
        ev.preventDefault();
      }
      // 拖放时把元素id存起来
      function drag(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
      }
      // 放下时, 获取元素id,并根据id获取元素,并把元素插入到目标元素
      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        var $ele = document.getElementById(data);
        ev.target.appendChild($ele);
      }
    </script>
  </body>
</html>

(七) 离线缓存

HTML5 中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个 cache manifest 缓存清单文件。

(1) 离线缓存优势

1、可配置需要缓存的资源；

2、网络无连接应用仍可用；

3、本地读取缓存资源，提升访问速度，增强用户体验；

4、减少请求，缓解服务器负担。

(2) 缓存清单文件

缓存清单文件中列出了浏览器应缓存，以供离线访问的资源。推荐使用 .appcache作为后缀名，另外还要添加 MIME 类型。

缓存清单文件里的内容怎样写：

（1）顶行写 CACHE MANIFEST。

（2）CACHE: 换行指定我们需要缓存的静态资源，如.css、image、js 等。

（3）NETWORK: 换行指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。

（4）FALLBACK: 换行当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。

格式举例 1：

格式举例 2：


CACHE MANIFEST
#要缓存的文件
CACHE:
    images/img1.jpg
    images/img2.jpg


#指定必须联网才能访问的文件
NETWORK:
     images/img3.jpg
     images/img4.jpg


#当前页面无法访问是回退的页面
FALLBACK:
    404.html

缓存清单文件怎么用：

（1）例如我们创建一个名为 demo.appcache的文件。例如：

demo.appcache：

CACHE MANIFEST
# 注释以#开头
#下面是要缓存的文件
CACHE:
    http://img.smyhvae.com/2016040101.jpg

（2）在需要应用缓存在页面的根元素(html)里，添加属性 manifest="demo.appcache"。路径要保证正确。例如：

<!DOCTYPE html>
<html manifest="demo.appcache">
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <img src="http://img.smyhvae.com/2016040101.jpg" alt="" />
  </body>
</html>

(八) 历史 history(略)

(九) 地图和地理定位

获取地理定位:

html5 提供了获取定位的 api
可以使用百度地图, 腾讯地图或者高德地图提交的公共 api 完成地图地位和地图绘制

(1) 使用html5提供api获取位置

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script>
      // 封装获取定位的方法
      function getLocation() {
        if (!navigator.geolocation) {
          console.log("对不起,你的浏览器不支持地理定位");
          return false;
        }
        // 调用html提供的api获取经纬度
        navigator.geolocation.getCurrentPosition(
          function successCallback(position) {
            // 纬度
            var wd = position.coords.latitude;
            // 经度
            var jd = position.coords.longitude;
          },
          function (err) {
            console.log("获取位置失败");
          }
        );
      } 
    </script>
  </body>
</html>

(2) 使用腾讯地图api获取位置

申请apikey(也就是访问腾讯地图api的通行证)
登录腾旭地图服务, 控制台->应用管理->我的应用->创建应用->添加key
```
referer: woshilaohu
key XBZBZ-OBG63-LOD3N-3QR5Q-X6Z2Q-BFBIR
```
根据文档调用相关接口
文档地址: https://lbs.qq.com/webApi/component/componentGuide/componentGeolocation

 <!DOCTYPE html>
 <html>

 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>前端定位模块</title>
     <meta name="viewport"
         content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> 
     <script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js">
     </script>
 </head>

 <body>
    <button onClick="get()">获取定位信息</button>
    <p></p>


     <script type="text/JavaScript">
         var geolocation = new qq.maps.Geolocation("XBZBZ-OBG63-LOD3N-3QR5Q-X6Z2Q-BFBIR", "woshilaohu");   

        function get(params) {
            geolocation.getIpLocation(function (position) { 
            document.querySelector('p').innerHTML = JSON.stringify(position);
        }, function () {
            document.querySelector('p').innerHTML = '定位失败';
        });
        } 
    </script>
 </body> 
 </html>

(十) 绘图 canvas

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="600" height="600"></canvas>
    <script>
      var c = document.getElementById("myCanvas");
      var cxt = c.getContext("2d"); //获取2d作图对象
      cxt.moveTo(10, 10); //画线的的起始点
      cxt.lineTo(150, 50); //画线
      cxt.lineTo(10, 50);
      cxt.stroke(); //线
      cxt.fillStyle = "#FF0000"; //填充颜色
      cxt.beginPath(); //开始路径
      cxt.arc(70, 18, 15, 0, Math.PI * 2, true); //画圆
      cxt.closePath(); //结束路径
      cxt.fill(); //填充

      var img = document.createElement("img");
      img.src = "https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif";
      img.onload = function () {
        cxt.drawImage(img, 200, 200); //画布填充图片
      };
    </script>
  </body>
</html>

第10节 js进阶(2)-面向对象和设计模式

第10节 js进阶(4)-Es6新特性